<template>
  <div>
    <div class="main flex sb">
      <menuListCom v-if="isShow" />
      <mobilePhoneCom v-if="isShow" />
      <settingCom v-if="isShow" />
    </div>

    <div class="xybox" ref="xybox">{{ xyboxText }}</div>
  </div>
</template>

<script>
import menuListCom from "./menuList/index.vue";
import mobilePhoneCom from "./mobilePhone/index.vue";
import settingCom from "./setting/index.vue";
import { randomLenNum, deepClone } from "@/util/util.js";
import jsonData from "@/mixins/jsonData.js";
import request from "@/router/axios";
import { setStore, getStore } from "@/util/store";
import {
  setToken,
  setRefreshToken,
  removeToken,
  removeRefreshToken,
} from "@/util/auth";
export default {
  components: { menuListCom, mobilePhoneCom, settingCom },
  mixins: [jsonData],
  data() {
    return {
      isShow: false,
    };
  },
  async mounted() {
    console.log(this.$route.query.token);
    if (this.$route.query.token) {
      setToken(this.$route.query.token);
      setStore({ name: "token", content: this.$route.query.token });
    }
    console.log(
      "jsonDatajsonDatajsonDatajsonDatajsonDatajsonDatajsonDatajsonDatajsonData"
    );
    if (this.$route.query.id) {
      request({
        url: "/api/server-shop/admin/adorn/info",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        console.log(res);
        let data = JSON.parse(res.data.data.config);
        this.$store.commit("changejsonData", data);
        this.jsonData = data;
        this.isShow = true;
        console.log(this.$store.state.jsonData);
      });
    } else {
      /**查询是否有缓存*/
      let decorationInfo = window.localStorage.getItem("decorationInfo");
      console.log(decorationInfo);
      if (decorationInfo) {
        this.$store.commit("changejsonData", JSON.parse(decorationInfo));
        this.jsonData = JSON.parse(decorationInfo);
      }
      this.isShow = true;
    }

    let that = this;
    document.onmousemove = function (e) {
      if (that.$route.path == "/form/form") {
        if (that.$store.state.isDrop) {
          var e = e || window.event;
          var moveX = e.clientX; //得到距离左边移动距离
          var moveY = e.clientY + 10; //得到距离上边移动距离
          that.$refs.xybox.style.left = moveX + "px";
          that.$refs.xybox.style.top = moveY + "px";
          if (that.$store.state.isEnterMobilePhone) {
            document.body.style.cursor = "move";
          } else {
            document.body.style.cursor = "no-drop";
          }
        } else {
          return;
        }
      }
    };

    document.onmouseup = function (e) {
      if (that.$route.path == "/form/form") {
        e.preventDefault();
        document.body.style.cursor = "default";
        that.$refs.xybox.style.display = "none";
        that.$children[1].$refs.borderPon.style.display = "none";

        console.log(that.$store.state.isEditPon);
        if (that.$store.state.isEditPon) {
          console.log("--------------------1211");
          that.$store.state.isEditPon = false;
          that.$store.state.isDrop = false;
          that.jsonData.map((item, index) => {
            if (index !== 0) {
              that.$children[1].$refs[
                "mobilePhoneRef" + index
              ][0].style.borderBottom = "none";
              that.$children[1].$refs[
                "mobilePhoneRef" + index
              ][0].style.borderTop = "none";
            }
          });

          // console.log("编辑组件位置");
          console.log(that.$store.state);
          /**位置相同，不需要改变位置*/
          if (
            (that.$store.state.currentExitComPinIndex ==
              that.$store.state.enterPonIndex ||
              that.$store.state.enterPonIndex == null) &&
            that.$store.state.isEnterMobilePhone
          ) {
            console.log("不需要改变位置");
          } else if (that.$store.state.isEnterMobilePhone) {
            console.log("需要改变位置");
            that.jsonData.splice(that.$store.state.currentExitComPinIndex, 1);

            if (
              that.$store.state.currentExitComPinIndex >
              that.$store.state.enterPonIndex
            ) {
              if (that.$store.state.enterPonIndexType == "top") {
                that.jsonData.splice(
                  that.$store.state.enterPonIndex,
                  0,
                  that.$store.state.currentCom
                );
              }
              if (that.$store.state.enterPonIndexType == "bottom") {
                that.jsonData.splice(
                  that.$store.state.enterPonIndex + 1,
                  0,
                  that.$store.state.currentCom
                );
              }
            } else {
              //[0,1,2,3,4,5]
              if (that.$store.state.enterPonIndexType == "top") {
                that.jsonData.splice(
                  that.$store.state.enterPonIndex - 1,
                  0,
                  that.$store.state.currentCom
                );
              }
              if (that.$store.state.enterPonIndexType == "bottom") {
                that.jsonData.splice(
                  that.$store.state.enterPonIndex,
                  0,
                  that.$store.state.currentCom
                );
              }
            }
          } else {
            console.log("移除");
            that.jsonData.splice(that.$store.state.currentExitComPinIndex, 1);
            that.jsonData[0].isSetting = 1;
          }
          console.log(that.$store.state.currentExitComPinIndex);
          console.log(that.$store.state.enterPonIndex);

          that.$store.state.currentExitComPinIndex = null;
          that.$store.state.enterPonIndex = null;
          // console.log(that.jsonData);
          return;
        }

        /***点击了组件放在屏幕上  start****/
        if (that.$store.state.isDrop && that.$store.state.isEnterMobilePhone) {
          that.jsonData.map((item, index) => {
            item.isSetting = false;
            console.log(index);
            if (index !== 0) {
              that.$children[1].$refs[
                "mobilePhoneRef" + index
              ][0].style.borderBottom = "none";
              that.$children[1].$refs[
                "mobilePhoneRef" + index
              ][0].style.borderTop = "none";
            }
          });

          console.log(that.$store.state.currentCom);
          // console.log(that.$store.state.enterPonCom);
          console.log(that.$store.state.enterPonIndex);
          console.log(that.$store.state.enterPonIndexType);

          /**插入在屏幕其他位置 start**/
          if (that.$store.state.enterPonIndex !== null) {
            if (that.$store.state.enterPonIndexType == "top") {
              that.jsonData.splice(
                that.$store.state.enterPonIndex,
                0,
                that.$store.state.currentCom
              );
            }
            if (that.$store.state.enterPonIndexType == "bottom") {
              that.jsonData.splice(
                that.$store.state.enterPonIndex + 1,
                0,
                that.$store.state.currentCom
              );
            }
            that.$store.state.currentCom = "";
            that.$store.state.enterPonIndex = null;
            that.$store.state.enterPonIndexType = null;
            // console.log(that.jsonData);
          } else {
            that.jsonData.push(that.$store.state.currentCom);
            console.log(that.jsonData);
            that.$store.state.currentCom = "";
          }
          /**插入在屏幕其他位置 end**/
        }
        /***点击了组件放在屏幕上  end****/
        that.$store.state.isEditPon = false;
        that.$store.state.isDrop = false;
        console.log(that.jsonData);
        // jsonData.map((item) => {
        //   if (item.name == "富文本") {
        //     item.content = item.content
        //       .replace(/style/gi, "class")
        //       .replace(
        //         /\<img/gi,
        //         '<img style="max-width:100%;width:100%;min-width:100%;height:auto"'
        //       );
        //   }
        // });
      }
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.main {
  height: 99%;
}
.xybox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  background: #f4f6fc;
  padding: 0px 8px;
  line-height: 26px;
  color: #409eff;
  border: 1px dashed #409eff;
  display: none;
  font-size: 13px;
  z-index: 999;
}
</style>
